<template>
  <el-dialog :modelValue="visiable" title="铁塔" width="800" @closed="emit('closed')">
    <!-- search -->
    <div class="flex mb-5 justify-between items-center">
      <div>
        <el-input
          v-model="search"
          placeholder="请输入铁塔名称"
          style="width: 240px"
          clearable
          class="mr-2"
          @input="searchChange" />
        <el-select
          v-model="searchStyle"
          placeholder="请选择塔型"
          clearable
          style="width: 120px"
          class="mr-2"
          @change="searchChange">
          <el-option v-for="item in styleOptions" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-button type="primary" size="default" @click="searchChange">查询</el-button> -->
      </div>

      <div class="flex items-center gap-1">
        <!-- 铁塔数量 -->
        <div class="flex flex-col justify-center items-center bg-[#009432] w-10 h-10 rounded-[5px]">
          <div class="text-gray-100 text-lg">
            {{ numTotal }}
            <span class="text-[#bdc3c7] text-[10px] -ml-1">基</span>
          </div>
          <span class="text-[#bdc3c7] text-[10px] -mt-2">总计</span>
        </div>

        <!-- 耐张塔数量 -->
        <div class="flex flex-col justify-center items-center bg-[#B53471] w-10 h-10 rounded-[5px]">
          <div class="text-gray-100 text-lg">
            {{ numNaizhang }}
            <span class="text-[#bdc3c7] text-[10px] -ml-1">基</span>
          </div>
          <span class="text-[#bdc3c7] text-[10px] -mt-2">耐张</span>
        </div>

        <!-- 直线塔数量 -->
        <div class="flex flex-col justify-center items-center bg-[#34495e] w-10 h-10 rounded-[5px]">
          <div class="text-gray-100 text-lg">
            {{ numZhixian }}
            <span class="text-[#bdc3c7] text-[10px] -ml-1">基</span>
          </div>
          <span class="text-[#bdc3c7] text-[10px] -mt-2">直线</span>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="towers?.data" border center>
      <el-table-column type="expand">
        <template #default="props">
          <div class="mx-4 flex items-center gap-1">
            <el-tag>轴向张力:</el-tag>
            <p class="text-[#006266]">{{ Math.round(props.row.ph) }}</p>
            <span class="text-gray-400 text-xs">kN</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="名称" width="100">
        <template #default="scope">
          <div class="flex items-center">
            <EiffelTower theme="outline" size="16" fill="#16a085" class="mr-2" v-if="scope.row.tStyle !== '直线'" />
            <SignalTowerOne theme="outline" size="16" fill="#2980b9" class="mr-2" v-if="scope.row.tStyle === '直线'" />
            <span class="text-sm">{{ scope.row.tName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="铁塔类型" width="85">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.tStyle === '直线'">{{ scope.row.tStyle }}</el-tag>
          <el-tag type="warning" v-if="scope.row.tStyle !== '直线'">{{ scope.row.tStyle }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="tType" label="塔型" />
      <el-table-column label="转角" width="100">
        <template #default="scope">
          <el-tag type="danger" v-if="scope.row.corner">{{ scope.row.corner }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="高程" width="100">
        <template #default="scope">
          <div class="flex items-center">
            <Local theme="outline" size="16" fill="#1abc9c" class="mr-1" />
            <el-text class="flex items-end gap-0.5"
              >{{ scope.row.altitude }}
              <span class="text-gray-400 text-xs">m</span>
            </el-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="50" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row)">
            <FileEditingOne theme="outline" size="16" fill="#2c3e50" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="">
      <el-pagination
        background
        layout="prev, pager, next, total"
        v-model:current-page="currentPage"
        :total="towers?.meta.total"
        class="mt-5"
        @current-change="currentChange" />
    </div>
  </el-dialog>
  <DialogTowerEdit :visiable="towerEditVisiable" :towerEdit="towerEdit" @close="closeEdit" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import useTower from '@/composables/useTower'
import { EiffelTower, FileEditingOne, Local, SignalTowerOne } from '@icon-park/vue-next'
import DialogTowerEdit from './DialogTowerEdit.vue'
import { towerModel } from '@/types/model'
const prop = defineProps(['visiable', 'sectionId'])
const emit = defineEmits(['closed'])
const search = ref('')
const searchStyle = ref('')
const currentPage = ref(1)
const numNaizhang = ref(0)
const numZhixian = ref(0)
const numTotal = ref(0)

const towerEditVisiable = ref(false)
const towerEdit = ref<towerModel>()

const { towers, all: allTower } = useTower()
const styleOptions = [{ value: '直线' }, { value: '耐张' }, { value: '牵引场' }, { value: '张力场' }]

const searchChange = async () => {
  await allTower({
    sectionId: prop.sectionId,
    search: search.value,
    searchStyle: searchStyle.value || '',
    page: currentPage.value,
  })
}

const currentChange = async () => {
  await allTower({ sectionId: prop.sectionId, search: search.value, page: currentPage.value })
}

const total = async () => {
  await allTower({ sectionId: prop.sectionId })
  numNaizhang.value = towers.value?.data.filter((t) => t.tStyle.includes('耐')).length!
  numZhixian.value = towers.value?.data.filter((t) => t.tStyle.includes('直')).length!
  numTotal.value = towers.value?.data.length!
}

const edit = (tower: towerModel) => {
  towerEditVisiable.value = true
  towerEdit.value = tower
}

const closeEdit = () => {
  towerEditVisiable.value = false
}
total()
allTower({ sectionId: prop.sectionId, search: search.value, page: 1 })
</script>
